<template>
    <view class="login-wrap">
        <view class="login-container">
            <u--image :showLoading="true" src="../../static/loginLogo.png" width="80px" height="80px"></u--image>
            <text class="fs-56 fs-strong">社团系统</text>
            <view class="login-form">
                <u-row justify="space-between" customStyle="margin-bottom:50rpx">
                    <strong class="fs-40">登录</strong>
                    <text class="fs-40 fs-gold" @tap="toRegister">创建账户</text>
                </u-row>

                <!-- 登录表单 -->
                <u--form :model="formData" :rules="rules" ref="ruleForm">
                    <u-form-item prop="stu_code">
                        <u--input
                            placeholder="学号"
                            placeholderStyle="color:#333;font-size:40rpx"
                            prefixIcon="account-fill"
                            prefixIconStyle="font-size: 40px;color: #333;"
                            class="login-input"
                            v-model="formData.stu_code"
                        ></u--input>
                    </u-form-item>
                    <u-form-item prop="password">
                        <u--input
                            placeholder="密码"
                            placeholderStyle="color:#333;font-size:40rpx"
                            prefixIcon="lock-fill"
                            prefixIconStyle="font-size: 40px;color: #333"
                            class="login-input"
                            password
                            v-model="formData.password"
                        ></u--input>
                    </u-form-item>
                </u--form>
                <navigator url="/pages/forgetPass/forgetPass"><text class="fs-40 fs-gold">忘记密码?</text></navigator>
                <u-button text="登入" class="login-btn" size="large" color="#c5a767" @click="login"></u-button>
            </view>
        </view>
        <!-- 消息提示框 -->
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
export default {
    name: 'Login',
    data() {
        return {
            formData: {
                stu_code: '20191041084',
                password: '123456'
            },
            rules: {
                stu_code: [
                    {
                        type: 'string',
                        required: true,
                        message: '请填写学号',
                        trigger: ['blur']
                    },
                    {
                        pattern: /^20[0-9]{2}10[0-9]{2}[0-1][0-9]{2}/,
                        message: '学号格式错误',
                        trigger: ['change', 'blur']
                    }
                ],
                password: {
                    type: 'string',
                    required: true,
                    message: '请输入密码',
                    trigger: ['blur']
                }
            }
        };
    },
    methods: {
        toRegister() {
            uni.redirectTo({
                url: '/pages/register/index'
            });
        },
        login() {
            this.$refs['ruleForm']
                .validate()
                .then(res => {
                    this.$store.dispatch('user/login', this.formData).then(result => {
                        if (result === 200) {
                            this.$refs.uToast.show({
                                type: 'default',
                                title: '正在登录',
                                message: '正在登录',
                                complete() {
                                    uni.redirectTo({
                                        url: '/pages/activity/index'
                                    });
                                }
                            });
                        } else {
                            this.$refs.uToast.show({
                                type: 'error',
                                title: '登录失败',
                                message: '用户名或密码错误'
                            });
                        }
                    });
                })
                .catch(errors => {
                    this.$refs.uToast.show({
                        type: 'error',
                        title: '登录失败',
                        message: '登录失败'
                    });
                });
        }
    }
};
</script>

<style scoped lang="scss">
.login-wrap {
    background: #151819;
    height: 100vh;
}

.login-container {
    background-color: #000000;
    width: 100%;
    height: 100%;
    transform: scale(0.85);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    padding: 120rpx 35rpx;
    color: #fff;

    .login-form {
        width: 100%;
        margin-top: 100rpx;

        .login-input {
            background-color: #fff;
            color: #333;
            height: 112rpx;
            width: 100%;
            margin-bottom: 20rpx;
        }

        .login-btn {
            border: 0;
            height: 100rpx;
            color: #fff;
            margin-top: 30rpx;
        }
    }
}
</style>
